<template>
  <div>
    <a-layout>
      <a-layout-header style="background: #fff" class="flex-justify">
        <div>
          <iconpark-icon name="source" class="mr-1"> </iconpark-icon>
          {{ contentData.whereFrom }}
        </div>
        <div class="address">
          <iconpark-icon name="address" class="mr-1"></iconpark-icon>
          <a target="_blank" :href="contentData.projectAddress">项目地址</a>
        </div>
        <div>
          <iconpark-icon name="author" class="mr-1"></iconpark-icon>
          {{ contentData.author }}
        </div>
        <div class="time">
          <iconpark-icon name="createdTime" class="mr-1"></iconpark-icon>
          {{ contentData.createdTime }}
        </div>
      </a-layout-header>

      <a-layout-content
        :style="{
          margin: '0px 16px',
          padding: '0 24px',
        }"
      >
        <a-image
          :preview="{ visible: showImgVisible, onVisibleChange: setShowImgVisible }"
          class="showImg"
          :src="showImg"
          alt="点击图片查看"
          style="display: none"
        />
        <div class="markdown-body" v-highlight v-html="content" @click="searchImg"></div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  onUpdated,
  onUnmounted,
  ref,
} from "vue";
import { message } from "ant-design-vue";
import "mavon-editor/dist/markdown/github-markdown.min.css";
//高亮语法markdown
import "@/assets/sass/vs2015.scss";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const scroll = ref("");
    const contentData = ref("");
    const showImg = ref("");
    const showImgVisible = ref(false);
    const setShowImgVisible = (value) => {
      showImgVisible.value = value;
    };
    const content = ref("");

    function getInfo() {
      const contentId = proxy.$route.path.split("/")[2];
      proxy.$api.get("content/queryId?id=" + contentId).then((res) => {
        if (res.error === 0) {
          contentData.value = res.message;
          const MardownIt = require("markdown-it");
          const md = new MardownIt();
          const result = md.render(res.message.contentDetail);
          content.value = result;
        } else message.error(res.message);
      });
    }
    function searchImg(e) {
      if (e.target.localName === "img" && e.target.src) {
        showImg.value = e.target.src;
        showImgVisible.value = true;
      }
    }

    onMounted(() => {
      getInfo();
      window.addEventListener("scroll", handleScroll);
    });
    function handleScroll() {
      scroll.value = document.documentElement.scrollTop || document.body.scrollTop;
    }
    onUpdated(() => {
      getInfo();
      if (scroll.value !== 0) {
        backTop();
      }
    });
    function backTop() {
      const timer = setInterval(() => {
        const ispeed = Math.floor(-scroll.value / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          scroll.value + ispeed;
        if (scroll.value === 0) {
          clearInterval(timer);
        }
      }, 16);
    }
    onUnmounted(() => {
      window.removeEventListener("scroll", handleScroll);
    });
    return {
      contentData,
      showImg,
      showImgVisible,
      content,
      setShowImgVisible,
      searchImg,
      backTop,
    };
  },
});
</script>
